@extends('layouts.home.layout')
@section('css')
    <link rel="stylesheet" href="/home/css/amazeui.min.css">
    <link rel="stylesheet" href="/home/css/com.css">
    <link rel="stylesheet" href="/home/css/main.css">
    <link rel="stylesheet" href="/home/css/loan.css">
@endsection
@section('content')
    <script src="/home/js/hm.js"></script>
    <script type="text/javascript" defer async src="/home/js/9712e432da63dc22.js"></script>
    <script type="text/javascript" src="/home/js/base2.js"></script>
    <script type="text/javascript" src="/home/js/xt.2.0.0.js"></script>
    <script src="/home/js/ddzf.util2.js"></script>
    <script src="/home/js/xxjrbtn.js"></script>
    <script src="/home/js/lselect.js"></script>

    @include('layouts.home._nav')

    <div id="l-main">
        <div class="am-container">
            <div class="calc-entry">
                <ul class="am-cf">
                    <li class="ce-li cel1" style="margin-left: 150px;"><a href="/main/mortgage">购房贷款工具</a></li>
                    <li class="ce-li cel2 cur"><a href="/main/card">信用卡分期</a></li>
                    {{--<li class="ce-li cel3"><a href="/main/evaluate">贷款能力评估</a></li>--}}
                    <li class="ce-li cel4"><a href="/apply/cardstepone">信用卡快捷推荐</a></li>
                </ul>
            </div>
            <div class="calc-wrap">
                <div class="top">
                    <div class="icon icon4"></div>
                    <div class="t-r">
                        <h3 class="t">信用卡分期</h3>
                        <p class="p">合理分期，减小利息</p>
                    </div>
                </div>
                <form id="JS-calc1">
                    <div class="content am-cf">
                        <div class="con-op">
                            <div class="title">填写信息<span class="st">（均为必填）</span></div>
                            <div class="com-form">
                                <div class="a-form-group">
                                    <label class="a-label">金额</label>
                                    <div class="input-wrap">
                                        <div class="lfont-input">
                                            <input type="number" id="JS-amt-in" class="" placeholder="请输入" min="0">
                                            <label class="lfont-label">元</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="a-form-group">
                                    <label class="a-label">银行</label>
                                    <div class="input-wrap">
                                        <div class="l-select-wrap" id="JS-select-bankName" name="bankCode" min="0"><input type="hidden" name="bankCode" value="BOC"><input type="text" value="中国银行" placeholder="请选择" class="l-input "><ul style="display: none;"><li data-val="BOC">中国银行</li><li data-val="ICBC">工商银行</li><li data-val="CCB">建设银行</li><li data-val="ABC">农业银行</li><li data-val="CMB">招商银行</li><li data-val="PAB">平安银行</li><li data-val="PSBC">邮政银行</li><li data-val="CEB">光大银行</li><li data-val="GDB">广发银行</li><li data-val="CMBC">民生银行</li><li data-val="HXB">华夏银行</li><li data-val="CCTB">中信银行</li><li data-val="SPDB">浦发银行</li><li data-val="CIB">兴业银行</li><li data-val="BCM">交通银行</li><li data-val="CITI">花旗银行</li></ul></div>
                                    </div>
                                </div>
                                <div class="a-form-group">
                                    <label class="a-label">期数</label>
                                    <div class="input-wrap">
                                        <div class="l-select-wrap" id="JS-select-periods" name="period"><input type="hidden" name="period" value="6"><input type="text" value="6个月" placeholder="请选择" class="l-input " readonly><ul style="display: none;"><li data-val="3">3个月</li><li data-val="6">6个月</li><li data-val="9">9个月</li><li data-val="12">1年</li><li data-val="18">1年半</li><li data-val="24">2年</li></ul></div>
                                    </div>
                                </div>
                                <div class="a-form-group am-padding-top">
                                    <label class="a-label"></label>
                                    <div class="input-wrap">
                                        <input type="button" id="JS-calc" class="btn short btn-reg am-margin-right" value="计算">
                                        <input type="reset" class="btn short" value="重置">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="con-op">
                            <div class="title r">计算结果<span class="st">（计算结果仅供参考）</span></div>
                            <div class="result-content" id="JS-show-result">
                                <ul class="rc-box">
                                    <li class="rc-op">
                                        <span class="k">总利息</span>
                                        <span class="v"><i class="orange">0</i>元</span>
                                    </li>
                                    <li class="rc-op">
                                        <span class="k">总计还款额</span>
                                        <span class="v"><i class="orange">0</i>元</span>
                                    </li>
                                    <li class="rc-op">
                                        <span class="k">每期(月)还款额</span>
                                        <span class="v"><i class="orange">0</i>元</span>
                                    </li>
                                    <li class="rc-op">
                                        <span class="k">每日利息</span>
                                        <span class="v"><i class="orange">0</i>元</span>
                                    </li>
                                    <li class="rc-op">
                                        <span class="k">期数</span>
                                        <span class="v"><i class="orange">0</i>期</span>
                                    </li>
                                    <li class="rc-op">
                                        <span class="k">金额</span>
                                        <span class="v"><i class="orange">0</i>元</span>
                                    </li>
                                </ul>
                                <p class="r-tip2"><span class="icon"></span>此结果仅供参考，以当地实际情况为准</p>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="/home/js/lbackTop.js"></script>
    <script type="text/javascript" src="/home/js/ltabs.js"></script>
    <script type="text/javascript">
        $("#JS-backtop").Lbacktop();
        $("#JQ-taglink").ltabs({
            navLi: '.nav-tli',
            tabsPane: '.tag-pane',
            lEvent: 'mouseover'
        });
        $(function(){
            if (window.location.hostname == 'www.fyhb.com'){
                $("#JS-fyhb-copyright").show();
                $("#JS-xxjr-copyright").hide();
            }
        });
    </script>
    <div style="display:none">
        <script src="/home/js/z_stat.php" language="JavaScript"></script>
        <script src="/home/js/core.php" charset="utf-8" type="text/javascript"></script>

        <script type="text/javascript" src="/home/js/74778.js"></script>

    </div>
    <script src="/home/js/credit.js"></script>
    <script>
        $(function(){
            //初始化期数
            var periodJson = [
                {"key":"3个月","val":"3"},
                {"key":"6个月","val":"6"},
                {"key":"9个月","val":"9"},
                {"key":"1年","val":"12"},
                {"key":"1年半","val":"18"},
                {"key":"2年","val":"24"}
            ];

            $("#JS-select-periods").lselect({
                selectJson : periodJson,
                readonly:true,
                defaultText:"6个月",
                defaultValue:"6"
            });

            var bankNameJson = new Array();
            var bankCodes = BANK_KEYS.codes,bankLabels = BANK_KEYS.labels;
            for(var i=0;i<bankCodes.length;i++){
                bankNameJson[i] ={key:bankLabels[i],val:bankCodes[i]};
            }

            $("#JS-select-bankName").lselect({
                selectJson : bankNameJson,
                defaultText:"中国银行",
                defaultValue:"BOC"
            });

            $("#JS-calc").click(function(){
                var bankCode = $("input[name='bankCode']").val();
                var periods = $("input[name='period']").val();
                var amt = $("#JS-amt-in").val();
                var pattern = /((([0-9]{1,3})([,][0-9]{3})*)|([0-9]+))?([\.]([0-9]+))?$/;
                if(bankCode === null || $.trim(bankCode) == ''){
                    XT.error("请选择银行!");
                    return;
                }
                if(amt === null || $.trim(amt) == ''|| !pattern.test(amt)){
                    XT.error("金额不能为空且只能为正数!");
                    return;
                }

                var creditObj =  creditFQCalc(bankCode,periods,amt);
                creditObj.periods = periods;
                creditObj.amt = amt;
                $("#JS-show-result").template({
                    templateId: "xyk-calc-result",
                    source:  creditObj,
                    data: {success:true}
                });

            });
        });
    </script>

    <script type="text/html" id="xyk-calc-result">
        <ul class="rc-box">
            <li class="rc-op">
                <span class="k">总利息</span>
                <span class="v"><i class="orange">@{{zlx}}</i>元</span>
            </li>
            <li class="rc-op">
                <span class="k">总计还款额</span>
                <span class="v"><i class="orange">@{{bx}}</i>元</span>
            </li>
            <li class="rc-op">
                <span class="k">每期(月)还款额</span>
                <span class="v"><i class="orange">@{{mqhk}}</i>元</span>
            </li>
            <li class="rc-op">
                <span class="k">每日利息</span>
                <span class="v"><i class="orange">@{{mrlx}}</i>元</span>
            </li>
            <li class="rc-op">
                <span class="k">期数</span>
                <span class="v"><i class="orange">@{{periods}}</i>期</span>
            </li>
            <li class="rc-op">
                <span class="k">金额</span>
                <span class="v"><i class="orange">@{{amt}}</i>元</span>
            </li>
        </ul>
        <p class="r-tip2"><span class="icon"></span>此结果仅供参考，以当地实际情况为准</p>
    </script>
@endsection